<template>
  <div class="myDiv">
    <Header title="经销商等级变更申请"></Header>
    <div>
      <el-table
        :data="vesssel"
        v-loading="loading"
        border
        style="width: 100%;"
        size="mini"
        height="458"
        :stripe="true"
        :cell-style="{padding:'9px 0'}"
        @row-click="showdata"
      >
        <el-table-column
          fixed
          align="center"
          prop="userName"
          width="90"
          show-overflow-tooltip
          label="经销商名称"
        ></el-table-column>
        <!-- <el-table-column show-overflow-tooltip prop="content" align="center" label="审批内容"></el-table-column> -->
        <el-table-column show-overflow-tooltip prop="realGread" align="center" label="用户等级"></el-table-column>
        <el-table-column show-overflow-tooltip prop="submitTime" align="center" label="申请时间"></el-table-column>
      </el-table>
    </div>
    <div class="submitbtn">
      <van-button style="width:35%" @click="approval" type="info">申请审批</van-button>
    </div>

    <el-dialog width="80%" center title="申请审批" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item size="mini" label="用户名称" :label-width="formLabelWidth">
          <el-input v-model="form.userName" :readonly="true" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item size="mini" label="审批内容" :label-width="formLabelWidth">
          <el-input v-model="form.content" :clearable="true" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item size="mini" label="变更等级" :label-width="formLabelWidth">
          <el-select v-model="index" placeholder="请选择">
            <el-option
              v-for="(item,index) in form.gread"
              :key="item.id"
              :label="item.description"
              :value="index"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="approvals">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 弹出层 -->
    <van-popup v-model="show" round position="bottom" :style="{ height: '25%'}">
      <van-field label="当前状态:" :readonly="true" label-width="120px" v-model="datas.isPass" />
      <van-field label="申请内容:" :readonly="true" label-width="120px" v-model="datas.content" />
      <van-field label="申请变更等级:" :readonly="true" label-width="120px" v-model="datas.submitName" />
    </van-popup>
  </div>
</template>

<script>
import Header from "@/components/header";
export default {
  components: { Header },
  props: {},
  data() {
    return {
      vesssel: [], //页面数据
      loading: true,
      index: "",
      formLabelWidth: "80px",
      dialogFormVisible: false,
      // 申请审批
      form: {
        userName: "",
        content: "",
        realGread: "", //用户等级
        gread: [] //等级列表
      },
      // 展示的数据
      show: false,
      datas: {}
    };
  },
  watch: {},
  computed: {},
  methods: {
    // 申请审批
    approval() {
      this.form.userName = this.$store.state.userinfo.name;
      this.dialogFormVisible = !this.dialogFormVisible;
    },
    // 确认审批
    approvals() {
      // 从vuex 取数据
      let userinfo = this.$store.state.userinfo;
      let data = {
        userId: userinfo.id,
        userName: userinfo.name,
        content: this.form.content,
        reviewType: "GREAD_CHANGE",
        realGread: userinfo.grade,
        submitGread: this.form.gread[this.index].id,
        submitName: this.form.gread[this.index].description
      };
      // console.log(data);
      this.$http(this.api.addTiantanGreadChange, data).then(res => {
        this.Tips(res.data.message, "success");
        this.dialogFormVisible = !this.dialogFormVisible;
        this.init();
      });
    },
    // 弹出层
    showdata(row) {
      this.show = !this.show;
      row.isPass == 0
        ? (row.isPass = "待审批")
        : row.isPass == 1
        ? (row.isPass = "已通过")
        : (row.isPass = "已驳回");
      this.datas = row;
    },
    // 初始化数据
    init() {
      // 获取经销商等级列表
      this.$http(this.api.selectDistributorGread).then(res => {
        if (res.data.result == "true") {
          this.form.gread = res.data.pageData.data;
        }
      });
      // 获取审批列表
      this.$http(this.api.findAllGreadChange).then(res => {
        if (res.data.result == "true") {
          let data = res.data.pageData.data;
          for (let i = 0; i < this.form.gread.length; i++) {
            for (let j = 0; j < data.length; j++) {
              if (data[j].submitName == this.form.gread[i].greadName) {
                data[j].submitName = this.form.gread[i].description;
              }
              if (this.form.gread[i].id == data[j].realGread) {
                data[j].realGread = this.form.gread[i].description;
                this.vesssel = data;
              }
            }
          }
          this.loading = false;
        }
      });
    }
  },
  created() {
    this.init();
  },
  mounted() {}
};
</script>
<style scoped>
.myDiv {
}
.submitbtn {
  padding: 10px 0;
  text-align: center;
}
</style>